<template>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id" v-focus>
              编号：
            </label>
            <input type="text" id="id" v-model="id" :disabled="flag">
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model="name">
            <button @click="add(addOrUpdate)" :disabled="subFlag">提交</button>
          </div>
        </div>
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{ totalNum }}</span>
      </div>
      <table>
        <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="book in books" :key="book.id">
          <td> {{ book.id }} </td>
          <td> {{ book.name }} </td>
          <td> {{ book.date | date-format }} </td>
          <td>
            <a href="" @click.prevent="updateBook(book.id)">修改</a>
            <span>|</span>
            <a href="" @click.prevent = 'deleteBook(book.id)'>删除</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>


</template>

<script>
export default {
  data(){
    return{
      books:[
        {
          id: 1,
          name: '三国演义',
          date: 2525609975000
        },
        {
          id: 2,
          name: '水浒传',
          date: 2525609975000
        },
        {
          id: 3,
          name: '红楼梦',
          date: 2525609975000
        },
        {
          id: 4,
          name: '西游记',
          date: 2525609975000
        }
      ],
      id:'',
      name:'',
      flag:false,  // id输入框是否可修改标识
      addOrUpdate: 0,  // 0代表添加  1代表修改
      subFlag:false, // 提交按钮是否禁用（图书存在时禁用）

    }
  },

  methods:{
    // 添加图书的方法
    add() {
      if(this.addOrUpdate===0){
        // 添加图书
        this.books.push({
          id: this.id,
          name: this.name,
          date: new Date()
        });
      }else{
        const book = this.books.filter((book)=>{
          return book.id === this.id;
        });
        book[0].name = this.name
      }

      // 添加之后清空input框
      this.id = '';
      this.name = '';
      this.flag  = false

    },
    // 更新图书的方法
    updateBook(id){
      this.addOrUpdate = 1;
      // 需要修改的当前图书信息
      const book = this.books.filter((book)=>{
        return book.id === id;
      });

      // 让input框显示相应内容
      this.id = book[0].id;
      this.name = book[0].name;
      this.flag = true;

    },
    deleteBook(id){
      // 获取当前图书的索引
      const index = this.books.findIndex((book)=>{
        return book.id === id
      });

      this.books.splice(index, 1)

    }
  },
  computed:{
    totalNum(){
      return this.books.length
    }
  },
  // 自定义局部指令
  directives:{
    focus:{
      inserted(el){
        // 自动聚焦
        el.focus()
      }
    }
  },

  // 监视图书是否存在
  watch:{
    name:{
      deep:true,
      handler(val){
        const book = this.books.find((book)=>{
          return book.name === val
        });
        if(book){
          this.subFlag = true
        }else{
          this.subFlag = false
        }
      }
    }
  }

}
</script>


<style type="text/css">
.grid {
  margin: auto;
  width: 530px;
  text-align: center;
}
.grid table {
  border-top: 1px solid #C2D89A;
  width: 100%;
  border-collapse: collapse;
}
.grid th,td {
  padding: 10px;
  border: 1px dashed #F3DCAB;
  height: 35px;
  line-height: 35px;
}
.grid th {
  background-color: #F3DCAB;
}
.grid .book {
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #F3DCAB;
}
.grid .total {
  height: 30px;
  line-height: 30px;
  background-color: #F3DCAB;
  border-top: 1px solid #C2D89A;
}
</style>

